KnockoutJS একটি জনপ্রিয় JavaScript লাইব্রেরি যা MVVM (Model-View-ViewModel) আর্কিটেকচার অনুসরণ করে এবং data-binding ও dependency tracking এর মাধ্যমে ইউজার ইন্টারফেস (UI) তৈরি করতে সাহায্য করে। KnockoutJS দিয়ে আপনি dynamic UI তৈরি করতে পারেন যেখানে মডেল ডেটা পরিবর্তন হলে, ভিউ স্বয়ংক্রিয়ভাবে আপডেট হয়।
এখানে KnockoutJS এর local setup করার জন্য স্টেপ বাই স্টেপ গাইড দেওয়া হল:
1. KnockoutJS Setup করার ধাপ
KnockoutJS সেটআপ করার জন্য আপনাকে প্রথমে এর লাইব্রেরি ইন্সটল করতে হবে এবং HTML পেজে অন্তর্ভুক্ত করতে হবে। এটি CDN বা local file দিয়ে করতে পারেন।
a. CDN ব্যবহার করে KnockoutJS ইনস্টল:
KnockoutJS ব্যবহার করার সবচেয়ে সহজ পদ্ধতি হল CDN (Content Delivery Network) থেকে লাইব্রেরি লোড করা। নিচের কোডটি আপনার HTML পেজে <head> ট্যাগের মধ্যে যুক্ত করুন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Setup</title>
<!-- Load KnockoutJS from CDN -->
<script src="https://cdn.jsdelivr.net/npm/knockout@3.5.1/build/output/knockout-latest.js"></script>
</head>
<body>
<h2>KnockoutJS Example</h2>
<!-- View: HTML binding -->
<div>
<p>Your name is: <span data-bind="text: name"></span></p>
<input type="text" data-bind="value: name, valueUpdate: 'input'" />
</div>
<script>
// ViewModel: KnockoutJS model
function AppViewModel() {
this.name = ko.observable("John Doe"); // Knockout observable
}
// Activating KnockoutJS
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
- KnockoutJS CDN লোড করা হয়েছে, যাতে আপনি সরাসরি লাইব্রেরিটি ব্যবহার করতে পারেন।
- observable ব্যবহার করে একটি
nameপ্রপার্টি তৈরি করা হয়েছে যা ইন্টারফেসে বাইন্ড করা হয়েছে। data-bindএর মাধ্যমে HTML উপাদানগুলিতে KnockoutJS ডেটা বাইন্ডিং প্রয়োগ করা হয়েছে। এখানে,textএবংvalueবাইন্ডিং ব্যবহার করা হয়েছে।
b. Local File থেকে KnockoutJS ব্যবহার করা:
আপনি KnockoutJS এর লাইব্রেরি ডাউনলোড করে আপনার প্রজেক্টে লোকালি যুক্ত করতে পারেন। নিচে কিভাবে এটি করবেন:
- KnockoutJS লাইব্রেরি ডাউনলোড করুন: KnockoutJS এর সর্বশেষ ভার্সন ডাউনলোড করতে KnockoutJS GitHub Repository থেকে ডাউনলোড করুন বা knockoutjs.com থেকে ডাউনলোড করুন।
- লাইব্রেরি ফাইল যুক্ত করুন: আপনার প্রজেক্টের ডিরেক্টরিতে KnockoutJS ফাইলটি রেখে HTML ফাইলে যোগ করুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Setup</title>
<!-- Load KnockoutJS from local file -->
<script src="knockout.js"></script>
</head>
<body>
<h2>KnockoutJS Example</h2>
<!-- View: HTML binding -->
<div>
<p>Your name is: <span data-bind="text: name"></span></p>
<input type="text" data-bind="value: name, valueUpdate: 'input'" />
</div>
<script>
// ViewModel: KnockoutJS model
function AppViewModel() {
this.name = ko.observable("John Doe"); // Knockout observable
}
// Activating KnockoutJS
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে, knockout.js ফাইলটি লোকালি ইনক্লুড করা হয়েছে, যা আপনি আপনার প্রজেক্ট ফোল্ডারে রেখেছেন। আপনি knockout.js এর সঠিক পাথ নিশ্চিত করুন যাতে এটি সঠিকভাবে লোড হয়।
2. KnockoutJS এর মূল বৈশিষ্ট্য:
a. Observable:
KnockoutJS এ observable একটি খুবই গুরুত্বপূর্ণ বৈশিষ্ট্য। এটি কোনো ভ্যালু বা ডেটা পরিবর্তন হলে UI কে স্বয়ংক্রিয়ভাবে আপডেট করে। observable হল একটি ফাংশন যা যে কোনো ভ্যালু ট্র্যাক করতে সাহায্য করে এবং পরিবর্তন হলে সেই ভ্যালুকে UI এর সাথে বাইন্ড করে।
var observableValue = ko.observable("Hello, Knockout!");
console.log(observableValue()); // Get the current value
observableValue("New Value"); // Set a new value
console.log(observableValue()); // Get the updated value
b. Data Binding:
KnockoutJS তে data-binding ব্যবহার করে আপনি মডেল ডেটাকে ভিউ এর সাথে বাইন্ড করতে পারেন। এটি খুব সহজ এবং স্বয়ংক্রিয়ভাবে ভিউ আপডেট করতে সহায়তা করে। নিচে এর উদাহরণ দেওয়া হলো:
<div>
<p>Your name is: <span data-bind="text: name"></span></p>
<input type="text" data-bind="value: name, valueUpdate: 'input'" />
</div>
এখানে, data-bind এট্রিবিউট ব্যবহার করে:
text: নাম ভিউ-এ প্রদর্শন করা।value: ইনপুট ফিল্ডের ভ্যালু মডেল ডেটার সাথে বাইন্ড করা।
c. Computed Observables:
Computed observables এমন একটি ফিচার যা স্বয়ংক্রিয়ভাবে কোনো observable ডেটার পরিবর্তন অনুসরণ করে এবং সেই অনুযায়ী একটি নতুন ভ্যালু রিটার্ন করে।
var firstName = ko.observable("John");
var lastName = ko.observable("Doe");
var fullName = ko.computed(function() {
return firstName() + " " + lastName();
});
console.log(fullName()); // Output: John Doe
এখানে, fullName একটি computed observable যা firstName এবং lastName এর পরিবর্তন অনুসরণ করে এবং একটি নতুন ভ্যালু রিটার্ন করে।
3. KnockoutJS এর সাথে Basic Example:
এখন, একটি KnockoutJS অ্যাপ্লিকেশনের একটি পূর্ণ উদাহরণ দেয়া হলো যেখানে আপনি মডেল ডেটাকে UI এর সাথে বাইন্ড করতে পারবেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Example</title>
<script src="https://cdn.jsdelivr.net/npm/knockout@3.5.1/build/output/knockout-latest.js"></script>
</head>
<body>
<h2>KnockoutJS Example</h2>
<div>
<p>Your name is: <span data-bind="text: name"></span></p>
<input type="text" data-bind="value: name, valueUpdate: 'input'" />
</div>
<script>
// ViewModel: Define the model with observables
function AppViewModel() {
this.name = ko.observable("John Doe");
}
// Apply bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
- KnockoutJS এর মাধ্যমে মডেল এবং ভিউকে বাইন্ড করা হয়েছে। ইনপুট ফিল্ডের মধ্যে টাইপ করলে নামটি সরাসরি প্যারাগ্রাফে পরিবর্তিত হবে।
ko.observable()ব্যবহার করা হয়েছে নামের ভ্যালুকে ট্র্যাক করতে এবংdata-bindব্যবহার করে সেটি ভিউ তে দেখানো হয়েছে।
KnockoutJS তে local setup করা খুবই সহজ। আপনি CDN বা local file ব্যবহার করে KnockoutJS ইনস্টল করতে পারেন এবং এটি আপনার অ্যাপ্লিকেশনে ডাইনামিক ডেটা বাইন্ডিং, computed observables এবং অন্যান্য MVVM ফিচার সহজে প্রয়োগ করতে সহায়তা করবে। KnockoutJS এর মাধ্যমে আপনি রিয়েল-টাইম ইউজার ইন্টারফেস তৈরি করতে পারবেন যা ডেটা পরিবর্তনের সাথে সাথে UI আপডেট হবে, এবং এটি আপনার ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করবে।
Read more
